<template>
  <div class="c-fs24 c-fc-gray c-bg-f3">
    <div class="c-pv30 c-ph30 c-flex-row c-bg-white">
      <div class="c-ww120 c-hh120 c-flex-shrink0">
        <img :src="$addXossFilter(info.image, require('../../assets/defult270.png'))" alt="" class="c-w100 c-br10 c-hh120">
      </div>
      <div class="c-flex-grow1 c-ml20">
        <div class="c-fs28 c-fc-xblack c-fw-b c-text-ellipsis1">{{info.teacherName}}</div>
        <div class="c-text-ellipsis2 c-mt20 c-fc-xblack c-fw400">{{info.introduction}}</div>
      </div>
    </div>
    <div class="c-ph30 c-pv30 c-mt16 c-bg-white" v-if="info.details && info.details != '' && info.details != null">
      <div class="c-flex-row c-justify-sb c-aligni-center">
        <div>老师简介</div>
        <div @click="getMore" v-if="isShowMoreDesc">{{more ? "收起" : "查看更多"}}<span class="iconfont c-fs16 c-pl14">{{more ? "&#xe6ab;" : "&#xe6a9;"}}</span></div>
      </div>
      <div class="c-pt30 c-fc-xblack c-fw400" ref="moreDes" :class="more ? '' :'c-text-ellipsis2'">{{info.details}}</div>
    </div>
    <div class="c-ph30 c-pv30 c-mt16 c-bg-white">
      <div>课程({{total}})</div>
      <div class="c-pt30 c-flex-row c-justify-sb" v-for="(item,index) in courseList" :key="index" @click="goEduDetail(item.id)">
        <div class="c-ww160 c-maxh106 c-text-hidden c-p">
          <img :src="$addXossFilter(item.image, require('../../assets/defult270.png'))" alt="" class="c-w100 c-maxh106 c-br10">
          <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs20 c-hh30 c-br-tl10 c-br-br36 c-pl8 c-pr16 c-lh30" :class="item.saleCourseType==1?'c-bg-experience':'c-bg-formal'">
            {{item.saleCourseType==1?'体验课':'正式课'}}
          </div>
        </div>
        <div class="c-pl20 c-flex-row c-w0 c-flex-grow1 c-flex-column">
          <div class="c-fw-b c-text-ellipsis1 c-fc-xblack">{{item.saleCourseName}}</div>
          <div class="c-flex-row c-justify-sb c-pt52">
            <div class="c-flex-row theme-fc">
              <span v-if="item.price * 1 > 0" class="c-fs24">{{'￥' | iosPriceFilter}}</span>
              <span class="c-fs26">{{item.price * 1 > 0 ? item.price : '免费'}}</span>
            </div>
            <div class="c-fs20" v-if="item.saleNum > 0">{{item.saleNum}}人已报名</div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :noDataText="'暂无结果'" :noData="courseList.length == 0" :noMoreData="courseList.length > 0 && is_page == false" :showLoading="isLoading"></loading-status-tem>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
let cId = "";
export default {
  name: 'TeacherInfo',
  components: {
    loadingStatusTem,
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      info: {},
      more: false,
      is_page: false,
      isShowMoreDesc: true,
      courseList: [],
      page: 1,
      isLoading: false,
      total: "",
      limit: 10,
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    getTeacherInfo() {
      utilJs.getMethod(global.apiurl + "educationSystem/teacher/" + cId, res => {
        this.info = res;
        this.$nextTick(function () {
          if (!!this.$refs.moreDes && this.$refs.moreDes.offsetHeight > 65) {
            this.isShowMoreDesc = true;
            this.more = false;
          } else {
            this.isShowMoreDesc = false;
            this.more = true;
          }
        })
        this.wechatShare();
      })
    },
    getTeacherCourse() {
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(global.apiurl + "educationSystem/teacher/" + cId + "/saleCourses?page=" + this.page + '&limit=' + this.limit, res => {
          if (this.page == 1) {
            this.courseList = res.data;
          } else {
            let list = res.data;
            this.courseList = this.courseList.concat(list);
          }
          this.total = res.total;
          this.page = res.current_page < res.last_page ? (this.page + 1) : this.page;
          this.is_page = res.current_page < res.last_page ? true : false;
          this.isLoading = false;
        })
      }
    },
    getMore() {
      this.more = !this.more;
    },
    goEduDetail(id) {
      this.$routerGo(this, "push", {
        path: "/edu/eduDetail",
        query: {
          id,
        }
      })
    },
    // 下拉加载更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getTeacherCourse()
        }
      })
    },
    //分享
    wechatShare: function () {
      let title = this.info.teacherName;
      let shareImg = this.info.image;
      let shareUrl = window.location.href.split("#")[0] + '#/edu/teacherInfo/?id=' + this.info.id + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = this.info.introduction || "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.info.teacherName;
      let shareImg = this.info.image;
      let shareUrl = window.location.href.split("#")[0] + '#/edu/teacherInfo/?id=' + this.info.id + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = this.info.introduction || "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  activated() {
    setDocumentTitle("老师信息");// eslint-disable-line
    cId = this.$route.query.id;
    this.more = true;
    this.total = "";
    this.limit = 10;
    this.isShowMoreDesc = true;
    this.is_page = false;
    this.info = {};
    this.page = 1;
    this.courseList = [];
    this.isLoading = false;
    this.getTeacherInfo();
    this.getTeacherCourse();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.is_page = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
